<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>作文品读</title>
	<link rel="stylesheet" type="text/css" href="../plug/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<!-- 注意body的class -->
<body class="bg_gray">
	<!-- 加载层 -->
	<div class="load_contain m_flex_box flex_vc flex_hc">
		<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
   		 	<g fill="none" fill-rule="evenodd">
        		<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
		            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="1;0;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;1;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;1;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;1;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;1;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;1;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;1;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;0;1" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		        </g>
		    </g>
		</svg>
	</div>
	<div class="cover_opc swiper_cover"></div>
	<nav class="top_nav pos_f white">
		<a href="javascript:history.go(-1)" class="top_a nav_left">
			<i class="iconfont icon-left"></i>
		</a>
		<p class="nav_top_center">一年级</p>
		<a class="top_a nav_right" href="work_sc.html">
			<img src="../img//top_sc.png" class="top_img_sc">
		</a>
	</nav>
	<div class="padd_top"></div>
	<div class="kind_detail_choose">
		<dl class="kind_detail_dl m_flex_box">
			<dt>体裁：</dt>
			<dd class="flex-1 m_flex_box flex_vw">
				<span class="active">全部</span>
				<span>叙事</span>
				<span>写景</span>
				<span>叙事</span>
				<span>写景</span>
				<span>叙事</span>
				<span>写景</span>
				<span>说明文</span>
				<span>议论文</span>
				<span>书信</span>
				<span>日记</span>
				<span>叙事</span>
				<span>写景</span>
				<span>说明文</span>
				<span>议论文</span>
				<span>书信</span>
			</dd>
		</dl>
		<dl class="kind_detail_dl m_flex_box">
			<dt>字数：</dt>
			<dd class="flex-1 m_flex_box flex_vw">
				<span class="active">不限</span>
				<span>100字</span>
				<span>200字</span>
				<span>500字</span>
				<span>800字</span>
				<span>1000字</span>
				<span>1200字</span>
			</dd>
		</dl>
	</div>
	<div class="book_show_list">
		<div class="how_list_swiper flex-1">
	        <div class="good_recommend_contain">
	        	<div class="list_">
	        		<div class="work_list_contain mar_b">
	        			<a href="work_detail.html" class="work_list_inner">
	        				<div class="work_list_inner_tit m_flex_box flex_vc flex_jz">
	        					<div class="work_list_inner_tit_left m_flex_box flex_vc">
	        						<img src="../img/book_.png" alt="">
	        						<span>四季如画</span>
	        					</div>
	        					<div class="work_list_inner_tit_right">2017-08-10</div>
	        				</div>
	        				<p class="work_list_inner_intro">
	        					四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春
	        				</p>
	        				<div class="work_list_inner_bottom m_flex_box">
	        					<span>一年级</span>
	        					<span>写人</span>
	        					<span>142字</span>
	        				</div>
	        			</a>
	        			<div class="work_sc_contain m_flex_box flex_vc">
	        				<img src="../img/sc.png">
	        				<span>收藏</span>
	        			</div>
	        		</div>
	        		<div class="work_list_contain mar_b">
	        			<a href="work_detail.html" class="work_list_inner">
	        				<div class="work_list_inner_tit m_flex_box flex_vc flex_jz">
	        					<div class="work_list_inner_tit_left m_flex_box flex_vc">
	        						<img src="../img/book_.png" alt="">
	        						<span>四季如画</span>
	        					</div>
	        					<div class="work_list_inner_tit_right">2017-08-10</div>
	        				</div>
	        				<p class="work_list_inner_intro">
	        					四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春
	        				</p>
	        				<div class="work_list_inner_bottom m_flex_box">
	        					<span>一年级</span>
	        					<span>写人</span>
	        					<span>142字</span>
	        				</div>
	        			</a>
	        			<div class="work_sc_contain m_flex_box flex_vc">
	        				<img src="../img/sc.png">
	        				<span>收藏</span>
	        			</div>
	        		</div>
	        	</div>
	        </div>
		</div>
	</div>
     <a href="book_sc.html" class="body_bottom">
    	<div class="body_bottom_inner"></div>
    </a>
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../plug/layui/layui.all.js"></script>
	<script type="text/javascript" src="../plug/lazy/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../js/clamp.min.js"></script>
	<script type="text/javascript" src="../plug/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="../js/reset_font.js"></script>
	<script type="text/javascript">
		for(var i = 0;i<$(".work_list_inner_intro").length;i++){
	    	$clamp($(".work_list_inner_intro")[i], {clamp: 2});
	    }

		/*流加载*/
		var dom = '<div class="work_list_contain mar_b">'
	        			+'<a href="work_detail.html" class="work_list_inner">'
	        				+'<div class="work_list_inner_tit m_flex_box flex_vc flex_jz">'
	        					+'<div class="work_list_inner_tit_left m_flex_box flex_vc">'
	        						+'<img src="../img/book_.png" alt="">'
	        						+'<span>四季如画</span>'
	        					+'</div>'
	        					+'<div class="work_list_inner_tit_right">2017-08-10</div>'
	        				+'</div>'
	        				+'<p class="work_list_inner_intro">'
	        					+'四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春四季如春'
	        				+'</p>'
	        				+'<div class="work_list_inner_bottom m_flex_box">'
	        					+'<span>一年级</span>'
	        					+'<span>写人</span>'
	        					+'<span>142字</span>'
	        				+'</div>'
	        			+'</a>'
	        			+'<div class="work_sc_contain m_flex_box flex_vc">'
	        				+'<img src="../img/sc.png">'
	        				+'<span>收藏</span>'
	        			+'</div>'
	        		+'</div>';
		layui.use('flow', function(){
			var how_list_swiper;
		    var flow = layui.flow; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。

			// 流加载
			swip();
		    function swip(){
		    	flow.load({
				    elem: '.list_' //流加载容器
				    ,done: function(page, next){ //执行下一页的回调
				      //模拟数据插入
					    setTimeout(function(){
				        	var lis = [];
					        for(var i = 0; i < 8; i++){
				          		lis.push(dom);
					        }
					        next(lis.join(''), page < 10); //假设总页数为 10
					        /*图片预加载*/
					        for(var i = 0;i<$(".work_list_inner_intro").length;i++){
						    	$clamp($(".work_list_inner_intro")[i], {clamp: 2});
						    }
					        lazyImg();
				      	}, 500);
			    	}
			  	});
		    }
		});
		/*tab右侧按钮下拉效果*/
		$(".tab_choose_right").click(function(){
			$(".tab_choose_right_down").toggle(200);
			$(".swiper_cover").fadeToggle(200);
			$(".tab_choose_right img").toggleClass("active");
			$(".tab_choose_right_down_lsft").toggleClass("active");
		});
		/*收藏点击事件*/
		$(".book_show_list").on("click",".work_sc_contain",function(){
			if($(this).find("span").html() == "收藏"){
				$(this).find("span").html("已收藏");
				$(this).find("span").css("color","#ffbc34");
				layer.msg('<img src="../img/star.png" class="star_"><p>收藏成功</p>');
				$(this).find("img").attr("src","../img/sc_.png");
			}else{
				$(this).find("span").html("收藏");
				$(this).find("span").css("color","#a5a5a5");
				layer.msg('<img src="../img/star.png" class="star_"><p>取消收藏成功</p>');
				$(this).find("img").attr("src","../img/sc.png");
			}
		});
		/*顶部切换按钮点击事件*/
		$(".kind_detail_dl span").each(function(){
			$(this).click(function(){
				$(this).addClass("active").siblings().removeClass("active");
			})
		})
		// 图片预加载
		function lazyImg(){
			$("img.lazy").lazyload({
	      		effect: "fadeIn",
	      		skip_invisible:false,
		    });
		};
		lazyImg();
	</script>
</body>
</html>